<template>
  <view class="gallery-page">
    <!-- 顶部导航栏 -->
    <view class="top-bar">
      <view class="top-bar__bg" />
      <text class="top-bar__title">GALLERY</text>
      <text class="top-bar__subtitle">作品集</text>
      <!-- <view class="top-bar__actions">
        <view class="top-bar__action-btn" @tap="handleSearch">
          <cl-icon name="search-line" size="36" color="#fff" />
        </view>
        <view class="top-bar__action-btn" @tap="handleFilter">
          <cl-icon name="equalizer-line" size="36" color="#fff" />
        </view>
      </view> -->
    </view>

    <view class="gallery-layout">
      <!-- 左侧分类导航 -->
      <scroll-view
        scroll-y
        class="category-pane"
        :show-scrollbar="false"
      >
        <view
          v-for="(item, index) in categories"
          :key="item.id"
          class="category-item"
          :class="{ 'category-item--active': item.id === activeCategoryId }"
          @tap="handleCategoryTap(item.id)"
        >
          <view class="category-item__icon">
            <cl-icon
              :name="getCategoryIcon(item.id)"
              color="#fff"
            />
          </view>
          <text class="category-item__name">{{ item.name }}</text>
          <view class="category-item__count-wrapper">
            <text class="category-item__count">{{ item.count || 0 }}</text>
          </view>
          <view
            v-if="item.id === activeCategoryId"
            class="category-item__indicator"
          />
        </view>
      </scroll-view>

      <!-- 右侧作品展示区 -->
      <scroll-view
        scroll-y
        class="works-pane"
        :scroll-top="scrollTopValue"
        @scroll="handleScroll"
      >
        <view
          v-if="loading"
          class="works-loading"
        >
          <view class="loading-spinner">
            <view class="loading-spinner__ring" />
            <view class="loading-spinner__ring" />
            <view class="loading-spinner__ring" />
          </view>
          <text class="works-loading__text">精彩加载中</text>
        </view>
        <view
          v-else-if="!works.length"
          class="works-empty"
        >
          <cl-icon
            name="image-line"
            size="120"
            color="rgba(255, 255, 255, 0.2)"
          />
          <text class="works-empty__text">该分类暂无作品</text>
        </view>
        <view
          v-else
          class="works-grid"
        >
          <view
            v-for="(item, index) in works"
            :key="item.id"
            class="work-card"
            :style="{ animationDelay: `${index * 0.1}s` }"
            @tap="openWork(item.id)"
          >
            <!-- 图片容器 -->
            <view class="work-card__image-container">
              <cl-image
                :src="item.coverUrl"
                height="100%"
                width="100%"
                mode="aspectFill"
                :pt="{ className: 'work-card__image' }"
              />
              <!-- 图片遮罩渐变 -->
              <view class="work-card__overlay" />

              <!-- 图片数量标签 -->
              <view class="work-card__count">
                <text class="work-card__count-text">{{ item.imageCount || 6 }}</text>
              </view>

              <!-- 悬浮时显示的查看按钮 -->
              <view class="work-card__hover-action">
                <cl-icon
                  name="eye-line"
                  size="48"
                  color="#fff"
                />
                <text class="work-card__hover-text">查看作品</text>
              </view>
            </view>

            <!-- 卡片信息 -->
            <view class="work-card__body">
              <view class="work-card__header">
                <text class="work-card__title">{{ item.title || '室内简约' }}</text>
                <text class="work-card__title-en">PHOTOGRAPHY</text>
              </view>
              <view class="work-card__meta">
                <view class="work-card__tag">
                  <cl-icon
                    name="price-tag-line"
                    color="rgba(255, 255, 255, 0.6)"
                  />
                  <text class="work-card__tag-text">{{ item.subtitle || '室内套片' }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 回到顶部按钮 -->
        <view
          v-if="showBackTop"
          class="back-top-btn"
          @tap="scrollToTop"
        >
          <cl-icon
            name="arrow-up-line"
            size="40"
            color="#fff"
          />
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onPullDownRefresh } from "@dcloudio/uni-app";
import { fetchCategories, fetchWorks } from "@/services/gallery";

const categories = ref([]);
const works = ref([]);
const activeCategoryId = ref("");
const loading = ref(false);
const showBackTop = ref(false);
const scrollTop = ref(0);
const scrollTopValue = ref(0);

const categoryIconMap = {
  1: "camera-line",
  2: "image-add-line",
  3: "user-heart-line",
  4: "t-shirt-line",
  5: "ancient-gate-line",
  6: "user-smile-line",
  7: "landscape-line",
  8: "parent-line"
};

onLoad(() => {
  initData();
});

onPullDownRefresh(() => {
  initData(true).finally(() => {
    uni.stopPullDownRefresh();
  });
});

async function initData(force = false) {
  try {
    if (!categories.value.length || force) {
      const list = await fetchCategories();
      categories.value = list;
      activeCategoryId.value = list[0]?.id || "";
    }
    if (activeCategoryId.value) {
      await loadWorks(activeCategoryId.value, force);
    } else {
      works.value = [];
    }
  } catch (error) {
    uni.showToast({ title: error.message || "加载失败", icon: "none" });
  }
}

async function loadWorks(categoryId, refresh = false) {
  loading.value = true;
  try {
    const worksData = await fetchWorks({ categoryId });
    // worksData 返回结构：{ list: [], total: number }
    works.value = worksData?.list || [];
    if (refresh) {
      uni.showToast({ title: "已更新", icon: "none" });
    }
  } catch (error) {
    uni.showToast({ title: error.message || "作品加载失败", icon: "none" });
  } finally {
    loading.value = false;
  }
}

function handleCategoryTap(categoryId) {
  if (categoryId === activeCategoryId.value) return;
  activeCategoryId.value = categoryId;
  loadWorks(categoryId);
}

function openWork(workId) {
  uni.navigateTo({ url: `/pages/works/detail?id=${workId}` });
}

function getCategoryIcon(categoryId) {
  return categoryIconMap[categoryId] || "camera-line";
}

function handleSearch() {
  uni.showToast({ title: "搜索功能开发中", icon: "none" });
}

function handleFilter() {
  uni.showToast({ title: "筛选功能开发中", icon: "none" });
}

function handleScroll(e) {
  scrollTop.value = e.detail.scrollTop;
  showBackTop.value = e.detail.scrollTop > 500;
}

function scrollToTop() {
  // 通过修改 scrollTopValue 触发 scroll-view 滚动到顶部
  scrollTopValue.value = Math.random(); // 加随机数触发更新
  setTimeout(() => {
    scrollTopValue.value = 0;
  }, 100);
}
</script>

<style  lang="scss">
.gallery-page {
  height: 100vh;
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.top-bar {
  position: relative;
  height: 120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  overflow: hidden;

  &__bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -50%;
      width: 200%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(66, 134, 243, 0.1), transparent);
      animation: shimmer 3s infinite;
    }
  }

  &__title {
    position: relative;
    font-size: 36rpx;
    font-weight: 700;
    letter-spacing: 4rpx;
    background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.8) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 2rpx;
  }

  &__subtitle {
    position: relative;
    font-size: 22rpx;
    letter-spacing: 2rpx;
    color: rgba(255, 255, 255, 0.6);
  }

  &__actions {
    position: absolute;
    right: 32rpx;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 20rpx;
  }

  &__action-btn {
    width: 64rpx;
    height: 64rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    backdrop-filter: blur(10rpx);
    transition: all 0.3s;

    &:active {
      transform: scale(0.95);
      background: rgba(255, 255, 255, 0.15);
    }
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(50%);
  }
}

.gallery-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  height: 0;
}

.category-pane {
  width: 180rpx;
  background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
  height: 100%;
  border-right: 1px solid rgba(255, 255, 255, 0.05);

  // 隐藏滚动条
  &::-webkit-scrollbar {
    display: none;
  }
}

.category-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36rpx 8rpx;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  &__icon {
    margin-bottom: 12rpx;
    opacity: 0.6;
    transition: all 0.3s;
  }

  &__name {
    font-size: 24rpx;
    margin-bottom: 10rpx;
    color: rgba(255, 255, 255, 0.75);
    transition: all 0.3s;
    letter-spacing: 0.5rpx;
    text-align: center;
    line-height: 1.3;
  }

  &__count-wrapper {
    display: flex;
    align-items: center;
    gap: 2rpx;
  }

  &__count {
    font-size: 26rpx;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s;
  }

  &__indicator {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6rpx;
    height: 50%;
    background: linear-gradient(180deg, #4286f3 0%, #6ba4ff 100%);
    border-radius: 0 3rpx 3rpx 0;
    box-shadow: 0 0 16rpx rgba(66, 134, 243, 0.6);
  }

  &--active {
    background: rgba(66, 134, 243, 0.08);

    .category-item__icon {
      opacity: 1;
      transform: scale(1.05);
    }

    .category-item__name {
      color: #fff;
      font-weight: 600;
    }

    .category-item__count {
      color: #4286f3;
    }
  }

  &:active {
    background: rgba(255, 255, 255, 0.05);
  }
}

.works-pane {
  flex: 1;
  height: 100%;
  background: #0a0a0a;

  // 自定义滚动条样式（仅在H5中生效）
  &::-webkit-scrollbar {
    width: 8rpx;
  }

  &::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4rpx;

    &:hover {
      background: rgba(255, 255, 255, 0.3);
    }
  }
}

.works-loading {
  margin-top: 160rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24rpx;
  color: rgba(255, 255, 255, 0.6);
}

.loading-spinner {
  position: relative;
  width: 80rpx;
  height: 80rpx;

  &__ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 4rpx solid transparent;
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;

    &:nth-child(1) {
      border-top-color: #4286f3;
      animation-delay: 0s;
    }

    &:nth-child(2) {
      border-right-color: #6ba4ff;
      animation-delay: 0.3s;
    }

    &:nth-child(3) {
      border-bottom-color: #4286f3;
      animation-delay: 0.6s;
    }
  }
}

@keyframes pulse {
  0%, 100% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  50% {
    transform: rotate(180deg) scale(1.1);
    opacity: 0.7;
  }
}

.works-loading__text {
  font-size: 28rpx;
  letter-spacing: 2rpx;
}

.works-empty {
  margin-top: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32rpx;

  &__text {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1rpx;
  }
}

.works-grid {
  padding: 28rpx 20rpx;
  padding-bottom: 120rpx;
  display: flex;
  flex-direction: column;
  gap: 36rpx;
}

.work-card {
  background: #1a1a1a;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.4);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: translateY(40rpx);
  animation: fadeInUp 0.6s ease-out forwards;

  &:active {
    transform: translateY(-8rpx);
    box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.6);
  }

  &__image-container {
    position: relative;
    width: 100%;
    height: 400rpx;
    overflow: hidden;
  }

  &__image {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 0;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  &__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
    pointer-events: none;
    transition: opacity 0.3s;
  }

  &__count {
    position: absolute;
    bottom: 20rpx;
    left: 20rpx;
    display: flex;
    align-items: center;
    gap: 10rpx;
    background: rgba(0, 0, 0, 0.75);
    padding: 12rpx 20rpx;
    border-radius: 24rpx;
    backdrop-filter: blur(20rpx);
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
    transition: all 0.3s;
    z-index: 2;

    &-text {
      font-size: 26rpx;
      font-weight: 600;
      color: #fff;
    }
  }

  &__hover-action {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12rpx;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 3;
    pointer-events: none;
  }

  &__hover-text {
    font-size: 28rpx;
    color: #fff;
    letter-spacing: 2rpx;
    text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.6);
  }

  &__body {
    padding: 24rpx;
  }

  &__header {
    display: flex;
    align-items: baseline;
    gap: 12rpx;
    margin-bottom: 16rpx;
  }

  &__title {
    font-size: 32rpx;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.5rpx;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &__title-en {
    font-size: 18rpx;
    font-weight: 400;
    letter-spacing: 1.5rpx;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    flex-shrink: 0;
  }

  &__meta {
    display: flex;
    align-items: center;
  }

  &__tag {
    display: flex;
    align-items: center;
    gap: 8rpx;

    &-text {
      font-size: 26rpx;
      color: rgba(255, 255, 255, 0.65);
      letter-spacing: 0.5rpx;
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.work-card__image{
  border-radius: 0;
  :deep(.cl-image__inner) {
    border-radius: 0 !important;
  }

}

.back-top-btn {
  position: fixed;
  right: 32rpx;
  bottom: 120rpx;
  width: 96rpx;
  height: 96rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 50%;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20rpx);
  z-index: 100;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: fadeInScale 0.3s ease-out;

  &:active {
    transform: scale(0.9);
    background: rgba(0, 0, 0, 0.8);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
</style>
